.input {
    border: 1px solid red;
}
#dad{
    background-color: aquamarine;
}

/* .show{
    opacity: 1;
    transition: all 1s ease-in;
} */

/* .hide{
    opacity: 0;
    transition: all 1s ease-in;
} */
/* forwards 保存最后一帧样式
ease-in 动画曲线 */
.show{
    animation: show-item 2s ease-out forwards;
}
.hide{
    animation: hide-item 2s ease-in forwards;
}
@keyframes show-item {
    0% {
        opacity: 0;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 1;
        color: blue;
    }
}
@keyframes hide-item {
    0% {
        opacity: 1;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 0;
        color: blue;
    }
}